<template>
  <div id="buymaterials">
    <Header />
    <el-breadcrumb separator=">>" style="margin-left: 20px; font-size: 15px">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">建材选购</a></el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="10">
      <el-col :span="4"
        ><div class="grid-content bg-purple">
          <el-descriptions
            class="margin-top"
            :column="1"
            direction="vertical"
            :colon="false"
          >
            <el-descriptions-item
              ><img src="../../assets/images/u14250.png"
            /></el-descriptions-item>
            <el-descriptions-item
              :contentStyle="{ 'font-size': '20px', color: '#0080FF' }"
              >¥3500.00/<span style="font-size: 15px; color: #0080ff"
                >车(31.4吨)</span
              ></el-descriptions-item
            >
            <el-descriptions-item :contentStyle="{ 'font-size': '16px' }"
              >预拌抹灰砂浆1车装</el-descriptions-item
            >
            <el-descriptions-item :contentStyle="{ color: '#B5B7BD' }"
              >规格型号：DMP16</el-descriptions-item
            >
            <el-descriptions-item :contentStyle="{ color: '#B5B7BD' }">
              <template slot="label">
                <i class="el-icon-office-building"></i>
                <span
                  ><el-link type="info" href="/buymaterialsdetail"> 河南融昌建材有限公司</el-link></span
                >
              </template>
            </el-descriptions-item>
          </el-descriptions>
        </div></el-col
      >
      <el-col :span="4"
        ><div class="grid-content bg-purple">
          <el-descriptions
            class="margin-top"
            :column="1"
            direction="vertical"
            :colon="false"
          >
            <el-descriptions-item
              ><img src="../../assets/images/u14250.png"
            /></el-descriptions-item>
            <el-descriptions-item
              :contentStyle="{ 'font-size': '20px', color: '#0080FF' }"
              >¥3500.00/<span style="font-size: 15px; color: #0080ff"
                >车(31.4吨)</span
              ></el-descriptions-item
            >
            <el-descriptions-item :contentStyle="{ 'font-size': '16px' }"
              >预拌抹灰砂浆1车装</el-descriptions-item
            >
            <el-descriptions-item :contentStyle="{ color: '#B5B7BD' }"
              >规格型号：DMP16</el-descriptions-item
            >
            <el-descriptions-item :contentStyle="{ color: '#B5B7BD' }">
              <template slot="label">
                <i class="el-icon-office-building"></i>
                <span
                  ><el-link type="info" href="/buymaterialsdetail"> 河南融昌建材有限公司</el-link></span
                >
              </template>
            </el-descriptions-item>
          </el-descriptions>
        </div></el-col
      >
      <el-col :span="4"
        ><div class="grid-content bg-purple">
          <el-descriptions
            class="margin-top"
            :column="1"
            direction="vertical"
            :colon="false"
          >
            <el-descriptions-item
              ><img src="../../assets/images/u14250.png"
            /></el-descriptions-item>
            <el-descriptions-item
              :contentStyle="{ 'font-size': '20px', color: '#0080FF' }"
              >¥3500.00/<span style="font-size: 15px; color: #0080ff"
                >车(31.4吨)</span
              ></el-descriptions-item
            >
            <el-descriptions-item :contentStyle="{ 'font-size': '16px' }"
              >预拌抹灰砂浆1车装</el-descriptions-item
            >
            <el-descriptions-item :contentStyle="{ color: '#B5B7BD' }"
              >规格型号：DMP16</el-descriptions-item
            >
            <el-descriptions-item :contentStyle="{ color: '#B5B7BD' }">
              <template slot="label">
                <i class="el-icon-office-building"></i>
                <span
                  ><el-link type="info" href="/buymaterialsdetail"> 河南融昌建材有限公司</el-link></span
                >
              </template>
            </el-descriptions-item>
          </el-descriptions>
        </div></el-col
      >
      <el-col :span="4"
        ><div class="grid-content bg-purple">
          <el-descriptions
            class="margin-top"
            :column="1"
            direction="vertical"
            :colon="false"
          >
            <el-descriptions-item
              ><img src="../../assets/images/u14250.png"
            /></el-descriptions-item>
            <el-descriptions-item
              :contentStyle="{ 'font-size': '20px', color: '#0080FF' }"
              >¥3500.00/<span style="font-size: 15px; color: #0080ff"
                >车(31.4吨)</span
              ></el-descriptions-item
            >
            <el-descriptions-item :contentStyle="{ 'font-size': '16px' }"
              >预拌抹灰砂浆1车装</el-descriptions-item
            >
            <el-descriptions-item :contentStyle="{ color: '#B5B7BD' }"
              >规格型号：DMP16</el-descriptions-item
            >
            <el-descriptions-item :contentStyle="{ color: '#B5B7BD' }">
              <template slot="label">
                <i class="el-icon-office-building"></i>
                <span
                  ><el-link type="info" href="/buymaterialsdetail"> 河南融昌建材有限公司</el-link></span
                >
              </template>
            </el-descriptions-item>
          </el-descriptions>
        </div></el-col
      >
      <el-col :span="4"
        ><div class="grid-content bg-purple">
          <el-descriptions
            class="margin-top"
            :column="1"
            direction="vertical"
            :colon="false"
          >
            <el-descriptions-item
              ><img src="../../assets/images/u14250.png"
            /></el-descriptions-item>
            <el-descriptions-item
              :contentStyle="{ 'font-size': '20px', color: '#0080FF' }"
              >¥3500.00/<span style="font-size: 15px; color: #0080ff"
                >车(31.4吨)</span
              ></el-descriptions-item
            >
            <el-descriptions-item :contentStyle="{ 'font-size': '16px' }"
              >预拌抹灰砂浆1车装</el-descriptions-item
            >
            <el-descriptions-item :contentStyle="{ color: '#B5B7BD' }"
              >规格型号：DMP16</el-descriptions-item
            >
            <el-descriptions-item :contentStyle="{ color: '#B5B7BD' }">
              <template slot="label">
                <i class="el-icon-office-building"></i>
                <span
                  ><el-link type="info" href="/buymaterialsdetail"> 河南融昌建材有限公司</el-link></span
                >
              </template>
            </el-descriptions-item>
          </el-descriptions>
        </div></el-col
      >
      <el-col :span="4"
        ><div class="grid-content bg-purple">
          <el-descriptions
            class="margin-top"
            :column="1"
            direction="vertical"
            :colon="false"
          >
            <el-descriptions-item
              ><img src="../../assets/images/u14250.png"
            /></el-descriptions-item>
            <el-descriptions-item
              :contentStyle="{ 'font-size': '20px', color: '#0080FF' }"
              >¥3500.00/<span style="font-size: 15px; color: #0080ff"
                >车(31.4吨)</span
              ></el-descriptions-item
            >
            <el-descriptions-item :contentStyle="{ 'font-size': '16px' }"
              >预拌抹灰砂浆1车装</el-descriptions-item
            >
            <el-descriptions-item :contentStyle="{ color: '#B5B7BD' }"
              >规格型号：DMP16</el-descriptions-item
            >
            <el-descriptions-item :contentStyle="{ color: '#B5B7BD' }">
              <template slot="label">
                <i class="el-icon-office-building"></i>
                <span
                  ><el-link type="info" href="/buymaterialsdetail"> 河南融昌建材有限公司</el-link></span
                >
              </template>
            </el-descriptions-item>
          </el-descriptions>
        </div></el-col
      >
    </el-row>
    <el-row style="margin-left: 30px; color: #535458; font-weight: bolder"
      >以下产品暂不支持线上销售</el-row
    >
    <el-row :gutter="10">
      <el-col :span="4"
        ><div class="grid-content bg-purple">
          <el-descriptions
            class="margin-top"
            :column="1"
            direction="vertical"
            :colon="false"
          >
            <el-descriptions-item
              ><img src="../../assets/images/u14250.png"
            /></el-descriptions-item>
            <el-descriptions-item
              :contentStyle="{ 'font-size': '20px', color: '#0080FF' }"
              >¥3500.00/<span style="font-size: 15px; color: #0080ff"
                >车(31.4吨)</span
              ></el-descriptions-item
            >
            <el-descriptions-item :contentStyle="{ 'font-size': '16px' }"
              >预拌抹灰砂浆1车装</el-descriptions-item
            >
            <el-descriptions-item :contentStyle="{ color: '#B5B7BD' }"
              >规格型号：DMP16</el-descriptions-item
            >
            <el-descriptions-item :contentStyle="{ color: '#B5B7BD' }">
              <template slot="label">
                <i class="el-icon-office-building"></i>
                <span
                  ><el-link type="info" href="/buymaterialsdetail"> 河南融昌建材有限公司</el-link></span
                >
              </template>
            </el-descriptions-item>
          </el-descriptions>
        </div></el-col
      >
      <el-col :span="4"
        ><div class="grid-content bg-purple">
          <el-descriptions
            class="margin-top"
            :column="1"
            direction="vertical"
            :colon="false"
          >
            <el-descriptions-item
              ><img src="../../assets/images/u14250.png"
            /></el-descriptions-item>
            <el-descriptions-item
              :contentStyle="{ 'font-size': '20px', color: '#0080FF' }"
              >¥3500.00/<span style="font-size: 15px; color: #0080ff"
                >车(31.4吨)</span
              ></el-descriptions-item
            >
            <el-descriptions-item :contentStyle="{ 'font-size': '16px' }"
              >预拌抹灰砂浆1车装</el-descriptions-item
            >
            <el-descriptions-item :contentStyle="{ color: '#B5B7BD' }"
              >规格型号：DMP16</el-descriptions-item
            >
            <el-descriptions-item :contentStyle="{ color: '#B5B7BD' }">
              <template slot="label">
                <i class="el-icon-office-building"></i>
                <span
                  ><el-link type="info" href="/buymaterialsdetail"> 河南融昌建材有限公司</el-link></span
                >
              </template>
            </el-descriptions-item>
          </el-descriptions>
        </div></el-col
      >
      <el-col :span="4"
        ><div class="grid-content bg-purple">
          <el-descriptions
            class="margin-top"
            :column="1"
            direction="vertical"
            :colon="false"
          >
            <el-descriptions-item
              ><img src="../../assets/images/u14250.png"
            /></el-descriptions-item>
            <el-descriptions-item
              :contentStyle="{ 'font-size': '20px', color: '#0080FF' }"
              >¥3500.00/<span style="font-size: 15px; color: #0080ff"
                >车(31.4吨)</span
              ></el-descriptions-item
            >
            <el-descriptions-item :contentStyle="{ 'font-size': '16px' }"
              >预拌抹灰砂浆1车装</el-descriptions-item
            >
            <el-descriptions-item :contentStyle="{ color: '#B5B7BD' }"
              >规格型号：DMP16</el-descriptions-item
            >
            <el-descriptions-item :contentStyle="{ color: '#B5B7BD' }">
              <template slot="label">
                <i class="el-icon-office-building"></i>
                <span
                  ><el-link type="info" href="/buymaterialsdetail"> 河南融昌建材有限公司</el-link></span
                >
              </template>
            </el-descriptions-item>
          </el-descriptions>
        </div></el-col
      >
      <el-col :span="4"
        ><div class="grid-content bg-purple">
          <el-descriptions
            class="margin-top"
            :column="1"
            direction="vertical"
            :colon="false"
          >
            <el-descriptions-item
              ><img src="../../assets/images/u14250.png"
            /></el-descriptions-item>
            <el-descriptions-item
              :contentStyle="{ 'font-size': '20px', color: '#0080FF' }"
              >¥3500.00/<span style="font-size: 15px; color: #0080ff"
                >车(31.4吨)</span
              ></el-descriptions-item
            >
            <el-descriptions-item :contentStyle="{ 'font-size': '16px' }"
              >预拌抹灰砂浆1车装</el-descriptions-item
            >
            <el-descriptions-item :contentStyle="{ color: '#B5B7BD' }"
              >规格型号：DMP16</el-descriptions-item
            >
            <el-descriptions-item :contentStyle="{ color: '#B5B7BD' }">
              <template slot="label">
                <i class="el-icon-office-building"></i>
                <span
                  ><el-link type="info" href="/buymaterialsdetail"> 河南融昌建材有限公司</el-link></span
                >
              </template>
            </el-descriptions-item>
          </el-descriptions>
        </div></el-col
      >
      <el-col :span="4"
        ><div class="grid-content bg-purple">
          <el-descriptions
            class="margin-top"
            :column="1"
            direction="vertical"
            :colon="false"
          >
            <el-descriptions-item
              ><img src="../../assets/images/u14250.png"
            /></el-descriptions-item>
            <el-descriptions-item
              :contentStyle="{ 'font-size': '20px', color: '#0080FF' }"
              >¥3500.00/<span style="font-size: 15px; color: #0080ff"
                >车(31.4吨)</span
              ></el-descriptions-item
            >
            <el-descriptions-item :contentStyle="{ 'font-size': '16px' }"
              >预拌抹灰砂浆1车装</el-descriptions-item
            >
            <el-descriptions-item :contentStyle="{ color: '#B5B7BD' }"
              >规格型号：DMP16</el-descriptions-item
            >
            <el-descriptions-item :contentStyle="{ color: '#B5B7BD' }">
              <template slot="label">
                <i class="el-icon-office-building"></i>
                <span
                  ><el-link type="info" href="/buymaterialsdetail"> 河南融昌建材有限公司</el-link></span
                >
              </template>
            </el-descriptions-item>
          </el-descriptions>
        </div></el-col
      >
      <el-col :span="4"
        ><div class="grid-content bg-purple">
          <el-descriptions
            class="margin-top"
            :column="1"
            direction="vertical"
            :colon="false"
          >
            <el-descriptions-item
              ><img src="../../assets/images/u14250.png"
            /></el-descriptions-item>
            <el-descriptions-item
              :contentStyle="{ 'font-size': '20px', color: '#0080FF' }"
              >¥3500.00/<span style="font-size: 15px; color: #0080ff"
                >车(31.4吨)</span
              ></el-descriptions-item
            >
            <el-descriptions-item :contentStyle="{ 'font-size': '16px' }"
              >预拌抹灰砂浆1车装</el-descriptions-item
            >
            <el-descriptions-item :contentStyle="{ color: '#B5B7BD' }"
              >规格型号：DMP16</el-descriptions-item
            >
            <el-descriptions-item :contentStyle="{ color: '#B5B7BD' }">
              <template slot="label">
                <i class="el-icon-office-building"></i>
                <span
                  ><el-link type="info" href="/buymaterialsdetail"> 河南融昌建材有限公司</el-link></span
                >
              </template>
            </el-descriptions-item>
          </el-descriptions>
        </div></el-col
      >
    </el-row>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="40"
      style="margin-left: 40px;margin-top: 20px;"
    >
    </el-pagination>
  </div>
</template>
<script>
import Header from "@/components//Header.vue";
export default {
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
      dialogVisible: false,
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
    };
  },
  components: {
    Header,
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>
<style scoped src="../../style/buymaterials.css">
</style>
